<template>
  <div id="pay">
    <div class="moneybox">
      <p class="text">订单编号</p>
      <p class="text">{{ getCost.id }}</p>
      <p class="price">{{ getCost.money }}</p>
    </div>
    <div class="radiobox">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="支付宝" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="微信支付" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button color="#ff6040" block round type="info" @click="gopay"
      >支付</van-button
    >
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      radio: "1",
      orderinfo: {},
    };
  },
  methods: {
    gopay() {
      Toast(`使用${this.radio == 1 ? "支付宝" : "微信"}支付成功！`);
    },
  },
  mounted() {
    console.log(this.getCost);
    this.orderinfo = this.getCost;
  },
  computed: {
    ...mapGetters(["getCost"]),
  },
};
</script>

<style lang="less" scoped>
#pay {
  .van-button {
    position: fixed;
    bottom: 0.2rem;
    left: 50%;
    margin-left: -47.5%;
    width: 95%;
  }
  .moneybox {
    height: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .price {
      margin-top: 0.1rem;
      font-size: 0.4rem;
      color: #333;
      &::before {
        content: "￥";
        font-size: 0.2rem;
      }
    }
    .text {
      font-size: 0.14rem;
      color: #777;
    }
  }
}
</style>